<template>
  <div class="wuran">
      <div>
            <el-row  :gutter="10" style="margin-bottom:10px">
                <el-col :span="5"><div style="line-height:40px;" >入河点：</div>  </el-col>
                <el-col :span="10">
                    <el-input
                        placeholder="请输入内容"
                        v-model="input"
                        :disabled="true">
                    </el-input>
                </el-col>
                <el-col :span="6">
                    <el-button  disabled type="primary">点选</el-button>
                </el-col>
            </el-row>
            <el-row  :gutter="10" style="margin-bottom:10px">
                <el-col :span="5">
                    <div  style="line-height:40px;" >终点：</div> 
                </el-col>
                <el-col :span="10">
                    <el-input
                        placeholder="请输入内容"
                        v-model="input1"
                        :disabled="true">
                    </el-input>
                </el-col>
                <el-col  :span="6">
                    <el-button type="primary" @click="getXy">点选</el-button>
                </el-col>
            </el-row>
            <el-row>
              <el-button style="padding:7px 7px" size="mini" @click="startFenxi">开始分析</el-button>
              <el-button style="padding:7px 7px"  size="mini" @click="removeFenxi">清除结果</el-button>
              <el-button style="padding:7px 7px"  size="mini"><i class="el-icon-crop"></i>河流测量</el-button>
              <el-button style="padding:7px 7px"  size="mini">添加事件</el-button>
            </el-row>
      </div>
      <div>
            <el-collapse v-model="activeNames" @change="handlezhedieChange">
                <el-collapse-item class="fontWeight" title="敏感目标" name="1">
                    <el-checkbox-group class="groups" v-model="checkList1">
                        <el-checkbox  v-for="city in checkedList1" :label="city" :key="city" @change="change1" >
                            <img style="width:16px;height:16px;padding-right:10px;vertical-align:text-bottom" :src="checkedPic1[city]" alt="">
                            {{city}}</el-checkbox>
                    </el-checkbox-group>
                </el-collapse-item>
                <el-collapse-item class="fontWeight" title="检测点位" name="2">
                    <el-checkbox-group class="groups"  v-model="checkList2">
                        <el-checkbox   v-for="city in checkedList2" :label="city" :key="city" @change="change2" >
                            <img style="width:16px;height:16px;padding-right:10px;vertical-align:text-bottom" :src="checkedPic2[city]" alt="">
                            {{city}}</el-checkbox>
                    </el-checkbox-group>
                </el-collapse-item>
            </el-collapse>
      </div>
      <div class="threeStep">
            <div class="keyTitle"><span>关键目标</span></div>
            <div class="threeStepIcon">
                <div>起</div>
                <div>入</div>
                <div>汇</div>
            </div>
            <el-timeline>
                <el-timeline-item
                    v-for="(activity, index) in activities"
                    :key="index"
                    
                    :type="activity.type"
                    :color="activity.color"
                    :size="activity.size"
                >
                    <div v-html="activity.content"></div>
                </el-timeline-item>
            </el-timeline>
      </div>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations ,mapActions} from 'vuex'
import axios from "axios"
const positionsArr  = [[128.529783,47.246524],[128.440478,47.222609],[127.84304,47.073578],[127.239496,46.873233],[126.66943,46.687621],[126.386795,46.386889]]
const checkedPics = [
    "./data/icon/shui.png",
    "./data/icon/yin.png",
    "./data/icon/bao.png",
    "./data/icon/yin.png",
    "./data/icon/shui.png",
    "./data/icon/ku.png",
]
const checkedPic1 = {"水源地":checkedPics[0],"自来水厂":checkedPics[1],"自然保护区":checkedPics[2]};
const checkedPic2 = {"水质自动站":checkedPics[3],"河道站水情":checkedPics[4],"水库站水情":checkedPics[5]};
const checkedPosition1={"水源地":positionsArr[0],"自来水厂":positionsArr[1],"自然保护区":positionsArr[2]};
const checkedPosition2={"水质自动站":positionsArr[3],"河道站水情":positionsArr[4],"水库站水情":positionsArr[5]};
export default {
    data() {
        return {
            spllitHandler:null,
            input: '红旗岗沟',
            input1: '',
            handler3D:null,
            activeNames: ['1',"2"],
            checkedPic1 : {"水源地":checkedPics[0],"自来水厂":checkedPics[1],"自然保护区":checkedPics[2]},
            checkedPic2 : {"水质自动站":checkedPics[3],"河道站水情":checkedPics[4],"水库站水情":checkedPics[5]},
            checkedList1:["水源地","自来水厂","自然保护区"],
            checkedList2:["水质自动站","河道站水情","水库站水情"],
            checkList1: ['选中且禁用','复选框 A'],
            checkList2: ['选中且禁用','复选框 A'],
            activities: [{
                    content: 
                    `
                        <div class="keyItem">
                            <div class="keyItemLeft"></div>
                            <div class="keyItemRight">事故点</div>
                        </div>
                    `,
                    timestamp: '2018-04-12 20:46',
                    size: 'large',
                    type: 'primary',
                    icon: 'el-icon-more',
                    color: '#fff'
                }, {
                    content: 
                    `
                        <div class="keyItem">
                            <div class="keyItemLeft">入河点</div>
                            <div class="keyItemRight">
                                <h5>入河口</h5>
                                <p>起始点位，距离事故点直线距离1.1公里</p>
                            </div>
                        </div>
                    `,
                    timestamp: '2018-04-12 20:46',
                    size: 'large',
                    type: 'primary',
                    icon: 'el-icon-more',
                    color: '#fff'
                }, {
                    content: 
                    `
                        <div class="keyItem">
                            <div class="keyItemLeft">汇水点<br/>5.2Km</div>
                            <div class="keyItemRight">
                                <h5>红旗岗沟->依古密河</h5>
                                <p>距离起点***公里,距离终点****公里</p>
                            </div>
                        </div>
                    `,
                    timestamp: '2018-04-12 20:46',
                    size: 'large',
                    type: 'primary',
                    icon: 'el-icon-more',
                    color: '#fff'
                }
            ]
        }
    },
    methods: {
        ...mapMutations("windowInfo", { changeInfoBoxContent: "changeInfoBoxContent",
            changeTabName:"changeTabName",
            changeEcharts:"changeEcharts",
            changeChartVisiable:"changeChartVisiable",
            changeInfoContent:"changeInfoContent",
            changeInfoBoxMainVisiable:"changeInfoBoxMainVisiable"
        }),
        startFenxi(){
            this.handler3D.destroy()
        },
        removeFenxi(){
            viewer.entities.removeById("xiaoduan");
            viewer.entities.removeById("zhongdian");
        },
        handleZhedieChange(val) {
            console.log(val);
        },
        handlezhedieChange(){

        },
        change1(checked,city){
            const name = city.target.value;
            if(checked){
                this.$cp.addBillboard( "checked1" + name , checkedPosition1[name], checkedPic1[name] , name, "moveMove", this.entityLeftClick) 
            }else{
                viewer.entities.removeById("checked1" + name)
            }
        },
        change2(checked,city){
            const name = city.target.value;
            if(checked){
                this.$cp.addBillboard( "checked2" + name , checkedPosition2[name], checkedPic2[name] , name, "moveMove", this.entityLeftClick) 
            }else{
                viewer.entities.removeById("checked2" + name)
            }
        },
        entityLeftClick(entity){
            this.$cp.currentEntity = entity;
            entity.label.show=true;
            this.changeChartVisiable(true)
            this.changeInfoBoxMainVisiable(false)
            this.changeInfoContent(
               { 
                    one:"秦家（二）",
                    two:"尾矿库",
                    three:"河南站-呼兰河"
                }
            )
        },
        getMinIndex(arr) {
            var min = arr[0];
            //声明了个变量 保存下标值
            var index = 0;
            for (var i = 0; i < arr.length; i++) {
                if (min > arr[i]) {
                    min = arr[i];
                    index = i;
                }
            }
            return index;
        },
        
        getXy(){
            var that = this;
            this.handler3D = new Cesium.ScreenSpaceEventHandler( viewer.scene.canvas);//初始化之后才能引入全局viewer,进入函数前初始化this,调用全局viewer

                this.handler3D.setInputAction(function(movement) {
                viewer.entities.removeById("xiaoduan");
                viewer.entities.removeById("zhongdian");
                // 如果是move over用endPosition
                //var pick= new Cesium.Cartesian2(movement.endPosition.x,movement.endPosition.y);
                var pick= new Cesium.Cartesian2(movement.position.x,movement.position.y);
                if(pick){
                    //document.body.style.cursor = "crosshair"
                    var cartesian =  viewer.scene.globe.pick( viewer.camera.getPickRay(pick),  viewer.scene);
                    if(cartesian){
                        //世界坐标转地理坐标（弧度）
                        var cartographic =  viewer.scene.globe.ellipsoid.cartesianToCartographic(cartesian);
                        if(cartographic){
                            //鼠标位置地球表面物体的真实海拔
                            var height = viewer.scene.globe.getHeight(cartographic);
                            //视角海拔高度
                            //console.log( viewer.scene.camera);
                            var he = Math.sqrt( viewer.scene.camera.positionWC.x *  viewer.scene.camera.positionWC.x +  viewer.scene.camera.positionWC.y *  viewer.scene.camera.positionWC.y +  viewer.scene.camera.positionWC.z *  viewer.scene.camera.positionWC.z);
                            var he2 = Math.sqrt(cartesian.x * cartesian.x + cartesian.y * cartesian.y + cartesian.z * cartesian.z);
                            //地理坐标（弧度）转经纬度坐标
                            var point=[ cartographic.longitude / Math.PI * 180, cartographic.latitude / Math.PI * 180];
                            if(!height){
                                height = 0;
                            }
                            if(!he){
                                he = 0;
                            }
                            if(!he2){
                                he2 = 0;
                            }
                            if(!point){
                                point = [0,0];
                            }
                            let x = point[0].toFixed(6);  
                            let y = point[1].toFixed(6);
                            let allPositions = [];
                            axios.get('./data/污染河段.json').then(res=>{
                                let datas = res.data.coordinates;
                                datas.forEach((element ,index)=> {
                                    allPositions.push(element)
                                    
                                });
                                let allPositions1 = []
                                allPositions1 = [].concat.apply([], allPositions)
                                let distanceArr = [];
                                allPositions1.forEach((item)=>{
                                    var satrt = Cesium.Cartographic.fromDegrees(x,y)
                                    var end = Cesium.Cartographic.fromDegrees(item[0],item[1])
                                    var geodesic = new Cesium.EllipsoidGeodesic();
                                    geodesic.setEndPoints(satrt, end);
                                    var distance = geodesic.surfaceDistance
                                    distanceArr.push(distance);
                                })
                                let index = that.getMinIndex(distanceArr);
                                let distanceArrLess = allPositions1.slice(0,index+1);
                                that.$cp.addBillboard1( "zhongdian" , allPositions1[index], "./data/icon/zhongdian.png" , "终点", "leftClick", that.entityLeftClick) 
                                that.input1 = "松花江"
                                distanceArrLess = [].concat.apply([], distanceArrLess)
                                that.$cp.addPloygonLine("xiaoduan",distanceArrLess, Cesium.Color.BLUE)
                                that.handler3D.destroy()
                            })
                            
                        }
                    }
                }
            }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
        },
        //点击显示详细信息
        addBoundInfoBox(positionValue, elementId) {
                const oneDiv = window.document.getElementById(elementId)
                oneDiv.style.display = 'block'
                this.preRenderListener = viewer.scene.preRender.addEventListener(function() {
                    let elWidth = oneDiv.offsetWidth
                    let elHeight = oneDiv.offsetHeight // + 60
                    const scratch = new Cesium.Cartesian2() //cesium二维笛卡尔 笛卡尔二维坐标系就是我们熟知的而二维坐标系；三维也如此
                    let domPosition = positionValue
                    const canvasPosition = viewer.scene.cartesianToCanvasCoordinates(domPosition, scratch) //cartesianToCanvasCoordinates 笛卡尔坐标（3维度）到画布坐标
                    if (Cesium.defined(canvasPosition)) {
                        // 根据元素宽高及当前点屏幕坐标进行偏移
                        oneDiv.style.top = canvasPosition.y - elHeight * 1.5 + 'px'
                        oneDiv.style.left = canvasPosition.x - elWidth / 2 + 'px'
                    }
                })
        },
        //关闭广告牌
        hiddenInfoBox(event) {
                //Object.keys
                event.currentTarget.parentNode.parentNode.parentNode.parentNode.style.display = 'none'
        },
        //移除自定义信息框
        removeBoundInfoBox() {
            // // 移除元素
            // if (oldBoundInfoBox) {
            // 	oldBoundInfoBox.style.display = 'none'
            // 	oldBoundInfoBox = null
            // }
            // 移除监听事件
            if (this.preRenderListener) {
                this.preRenderListener()
                this.preRenderListener = null
            }
        },
    },
    mounted(){
        // this.getXy()
        // this.splitLayer()
    }
}
</script>

<style lang="stylus" scoped>
    @import '../../../../assets/css/varibles.styl'
    .wuran >>> .keyTitle 
        margin-top:15px;
    .wuran >>> .keyTitle span
        color:#507891
        margin-top:20px;
        border-bottom:2px solid #53BDCB
    .wuran >>> .keyItem
        margin-top:20px;
    .wuran >>> .keyItem
        border:1px solid #96C8D2
        border-radius:10px
        height:50px
        display:flex
    .wuran >>> .keyItemLeft
        flex:2
        line-height:25px
        text-align :center
        background :#D9F1F9
    .wuran >>> .keyItemRight
        flex:6
        text-align :center
        line-height:25px
    .wuran >>> .el-collapse
        margin-top:20px
    
    .wuran >>> .el-collapse-item__header
        font-weight:700
        color:#507891
        background:#D8E8F6
        height:20px
        margin-top:10px
        margin-bottom:10px
    .wuran
        color:#000
        background:#fff
        padding:20px
        padding-top:0px
        height:calc(100% - 55px)
        .threeStep
            position: relative
            .threeStepIcon
                height:100%
                position:absolute
                display:flex
                flex-direction :column
                justify-content :space-between
                div 
                    width:30px
                    height:30px
                    line-height:30px
                    text-align:center
                    border:2px solid #ddd
                    border-radius:50%
                    position:relative
                    z-index:10
                div:nth-child(1)
                    border-color:#D66355
                    left:-11px
                    top:10px
                div:nth-child(2)
                    border-color:#889586
                    left:-11px
                    top:-40px
                div:nth-child(3)
                    border-color:#E5A3A7
                    left:-11px
                    top:-80px

            
</style>